<template>
  <div>
    <TheContainer :title="title">
      <template #headerRight>
        <Button type="primary" size="small" @click="handleAddUser"
            >新增用户</Button
          >
      </template>
      <Table border :columns="columns" :loading="loading" :data="data">
        <template slot="last_modified_time" slot-scope=" {row} " >{{row.last_modified_time | dateFormat}}</template>
        <template slot="created_time" slot-scope=" {row} ">{{row.created_time | dateFormat}}</template>
        <template slot="gender" slot-scope=" {row} ">{{row.gender | gender}}</template>
        <template slot-scope=" {row} " slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="show(row)"
            >详情</Button
          >
          <Button type="error" size="small" @click="remove(row)"
            >删除</Button
          >
        </template>
      </Table>
      <div class="page">
        <Page :total="total" show-sizer @on-change="onChange" @on-page-size-change="onPageSizeChange" />
      </div>
    </TheContainer>
    <userModal v-model="open" :userData="userData" @reload="getUserList"></userModal>
    <addUser v-model="open1" @reload="getUserList"></addUser>
  </div>
</template>

<script>
  import userModal from '../components/User/userModal.vue'
  import addUser from '../components/User/addUser.vue'
export default {
  components: {
    userModal,
    addUser
  },
  data() {
    return {
      title: "用户列表详情",
      form: {
        page: 1,
        size: 10,
      },
      open:false,
      userData:{},
      total:100,
      loading: false,
      open1: false,
      columns: [
        {
          title: "用户名",
          align: "center",
          key: "nickname",
        },
        {
          title: "邮箱",
          align: "center",
          key: "email",
        },
        {
          title: "性别",
          align: "center",
          slot: "gender",
          key: "gender",
        },
        {
          title: "创建时间",
          align: "center",
          slot: "created_time",
          key: "created_time",
        },
        {
          title: "最后修改时间",
          align: "center",
          slot: "last_modified_time",
          key: "last_modified_time",
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center",
        },
      ],
      data: [],
    };
  },
  watch: {
    form: {
      handler() {
        this.getUserList()
      },deep: true
    }
  },
  created() {
    this.getUserList();
  },
  methods: {
    getUserList() {
      this.loading = true
      this.$API
        .GET_ALL_USER(this.form)
        .then((res) => {
          this.data = res.data;
          this.total = res.total
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
    },
    show(row) {
      this.userData = row
      this.open = true
    },
    onPageSizeChange(size) {
      this.form.size = size
    },
    onChange(page) {
      this.form.page = page
    },
    remove(row) {
      this.$API.POST_DEL_USER({nickname:row.nickname}).then(res => {
        this.$Message.success(res);
      }).catch(err => {
        this.$Message.error(err);
      }).finally(() =>{
        this.getUserList()
      })
    },
    handleAddUser() {
      this.open1 = true
    }
  },
};
</script>

<style lang='scss' scoped>
  .page{
    display: flex;
    justify-content: flex-end;
    margin: 30px 30px 0 0;
  }
</style>
